<template>
  <div class="FL2-box">
    <div class="box1">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#e5e5e5">
        <van-swipe-item><img src="https://res.vmallres.com/pimages/uomcdn/CN/cms/202206/4EC54A1A584A695A81254EADD0023EB7.jpg"></van-swipe-item>
        <van-swipe-item><img src="https://res.vmallres.com/pimages/uomcdn/CN/cms/202206/529D8AB2DFD0587647C418204BE77535.jpg"></van-swipe-item>
        <van-swipe-item><img src="https://res.vmallres.com/pimages/uomcdn/CN/cms/202206/6EB013594C854A68704D778FDAF7B0CD.jpg"></van-swipe-item>
        <van-swipe-item><img src="https://res.vmallres.com/pimages/uomcdn/CN/cms/202205/F9F4CC0D956D89B781421B08B6425D96.jpg"></van-swipe-item>
      </van-swipe>
    </div>
    <div class="box2">
        <h3>新品推荐</h3>
        <ul>
            <li v-for="(v,i) in arr" :key="i">
                <img :src="v.img">
                <p>{{v.title}}</p>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202206/gbom/6941487255092/428_428_CD14ACEE1DBD4E04C65BC2380BC9989Bmp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487261161/428_428_04C23C7E52BADA84FBDFEACBBE07C6C9mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487264261/428_428_987D42DD8355F540C8A0EDC404130A4Fmp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487264292/428_428_F415CCB087EEF7E038D8F13467956C13mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487264292/428_428_F415CCB087EEF7E038D8F13467956C13mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//product/6941487210565/428_428_0586DDD43A796BB8F9DCE0CF38A3C248212C18CA891A2AB9mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202204/gbom/6941487249428/428_428_D0425B49F36377EBC15687B3E52E955Amp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487262359/428_428_0F67C772701F59A6055CF6666EB3C9CDmp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202112/gbom/6941487258277/428_428_3DE90D439D7F7AA0B2A4B0C82811C3CAmp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202204/gbom/6941487264940/428_428_6E8DA488DAD823854834589C10745B78mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/sbom/4601010000309/428_428_E674F4CF0E2E309E99DA0DEAD529EF93mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487266746/428_428_76C34BDA1E2A0A46FDF23B15F8BE9852mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487258314/428_428_5C916C829077547D355D2EB9FDF3D19Dmp.jpg",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487258314/428_428_5C916C829077547D355D2EB9FDF3D19Dmp.jpg",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202204/gbom/6941487261611/428_428_17D89C5F7435B8AEF93A07D68A43AD39mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6941487261383/428_428_065B74E83F3E7835834A04814E79D0C4mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202204/gbom/6971943680434/428_428_7FD651A1A100668569B7DEE1585D3EC2mp.png",title:"华为畅想 50"},
                {img:"https://res.vmallres.com/pimages//uomcdn/CN/pms/202205/gbom/6944047809711/428_428_D6A3DF768172223311C807C75517FF62mp.png",title:"华为畅想 50"},
            ]
        }
    }
};
</script>

<style scoped>
.FL2-box{
    width: 100%;
    height: 1.24rem;
}
.FL2-box .box1{
    width: 100%;
    height: 100%;
    margin-top: 0.1rem;

}
.FL2-box .box1 .my-swipe .van-swipe-item img{
    width: 95%;
    height: 100%;
    border-radius: 0.2rem;
}
.box2{
    margin-top: 0.3rem;
    background-color: white;
    width: 95%;
    border-radius: 0.2rem;
    padding-left: 00.1rem;
    box-sizing: border-box;
}
.box2 h3{
    font-size: 0.14rem;
    padding-top: 0.14rem;
}
.box2 ul{
    display: flex;
    flex-wrap: wrap;
}
.box2 ul li{
    width: 33%;
    height: 1rem;
    margin-top: 0.36rem;
}
.box2 ul li img{
    width: 100%;
    height: 80%;
}
.box2 ul li p{
    font-size: 0.1rem;
    text-align: center;
}
</style>